<template>
  <div id="change">
    <div class="change-top">
      单据日期：
<<<<<<< HEAD
      <el-date-picker size="small" v-model="value1" style="width: 140px;" placeholder="选择日期">
      </el-date-picker>
      &nbsp;&nbsp;组装费用：
      <el-input size="small" style="width: 120px" placeholder="0.00"></el-input>
      &nbsp;&nbsp;业务员：
      <el-select style="width: 110px;" size="small">
      </el-select>
      <!-- &nbsp;&nbsp;部门：
      <el-select style="width: 110px;" size="small">

      </el-select> -->
      &nbsp;&nbsp;
      <el-button size="small">保存</el-button>
      <el-button size="small" type="primary">导入</el-button>
      <el-button size="small" type="success">审核</el-button>
      <PublicLink />
    </div>
    <div class="change-content">
      <!-- <hr>
      <br>
      <el-button>选择模版</el-button>
      <el-button>存为模版</el-button>
      <br>
      <br> -->
      <h5>组合件：</h5>
      <!-- <span style="margin-right: 70px;">模版编号：</span><span>模版名称：</span> -->
      <br>
      <br>
      <el-table :row-style="{ height: '40px' }" @row-click="handlerClick" height="130px" :data="comboBill" border
        style="width: 100%;font-size: 13px;">
        <el-table-column prop="createDate" label="商品编号" width="150">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.row.isEdit"></el-input>
            <span v-else>{{ scope.row.createDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="商品类别" width="120">
        </el-table-column>
        <el-table-column prop="pid" label="品牌" width="120">
        </el-table-column>
        <el-table-column prop="mid" label="属性" width="150">
        </el-table-column>
        <el-table-column prop="aid" label="单位" width="120">
        </el-table-column>
        <el-table-column prop="aid" label="仓库" width="120">
          <template slot-scope="scope">
            <el-select size="small" v-if="scope.row.isEdit"></el-select>
          </template>
        </el-table-column>
        <el-table-column prop="aid" label="可用库存" width="120">
        </el-table-column>
        <el-table-column prop="aid" label="数量" width="120">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.row.isEdit"></el-input>
            <span v-else>{{ scope.row.aid }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="aid" label="入库单位成本" width="120">
        </el-table-column>
        <el-table-column prop="aid" label="入库成本" width="120">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="180">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.row.isEdit"></el-input>
            <span v-else>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <h5>子件：</h5>
      <br>
      <el-table @row-click="handlerClick2" show-summary :summary-method="getSummaries" height="300px" :data="tableData"
        border style="width: 100%;font-size: 13px;">
        <el-table-column prop="createDate" label="商品编号" width="150">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.row.isEdit"></el-input>
            <span v-else>{{ scope.row.createDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="pid" label="品牌" width="120">
        </el-table-column>
        <el-table-column prop="mid" label="属性" width="150">
        </el-table-column>
        <el-table-column prop="aid" label="单位" width="120">
        </el-table-column>
        <el-table-column prop="aid" label="仓库" width="120">
          <template slot-scope="scope">
            <el-select size="small" v-if="scope.row.isEdit"></el-select>
          </template>
        </el-table-column>
        <el-table-column prop="aid" label="可用库存" width="120">
        </el-table-column>
        <el-table-column prop="aid" label="数量" width="120">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.row.isEdit"></el-input>
            <span v-else>{{ scope.row.aid }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="aid" label="出库单位成本" width="120">
        </el-table-column>
        <el-table-column prop="aid" label="出库成本" width="120">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="180">
          <template slot-scope="scope">
            <el-input size="small" v-if="scope.row.isEdit"></el-input>
            <span v-else>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-button style="position: relative;right: -1200px;" @click="goto('ComboBill')">历史单据</el-button>
    </div>

=======
      <el-date-picker size="small" v-model="assemble.createDate" value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 140px;" placeholder="选择日期">
      </el-date-picker>
      &nbsp;&nbsp;组装费用：
      <el-input size="small" v-model="assemble.assemCost" style="width: 120px" placeholder="0.00"></el-input>
      &nbsp;&nbsp;业务员：
      <el-select style="width: 110px;" size="small" v-model="assemble.employeeId">
        <el-option v-for="em, index in emList" :key="index" :label="em.employeeName" :value="em.employeeId"></el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-button size="small" @click="saveAssemble">保存</el-button>
      <el-button size="small" type="primary">导入</el-button>
      <el-button size="small" type="success">审核</el-button>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <span>单据编号：<el-input style="width: 120px;" size="small" v-model="assemble.assemCode"></el-input> <i
          class="el-icon-edit"></i></span>
    </div>
    <div class="change-content">
      <h5>组合件：</h5>
      <br>
      <br>
      <div class="com-div">
        <table id="combile" style="width: 100%;min-width: 1600px;">
          <tr>
            <th></th>
            <th width="15%">商品编号</th>
            <th width="10%">单位</th>
            <th width="20%">商品名称</th>
            <th width="20%">商品类别</th>
            <th width="10%">品牌</th>
            <th width="10%">仓库</th>
            <th width="10%">数量</th>
            <th width="10%">入库单位成本</th>
            <th width="10%">入库成本</th>
            <th>备注</th>
          </tr>
          <tr>
            <td>
              <el-button size="mini" @click="addRow"><i class="el-icon-circle-plus-outline"></i></el-button>
              <el-button size="mini" @click="reduceRow"><i class="el-icon-remove-outline"></i></el-button>
            </td>
            <td>
              <el-input size="small" style="width: 140px;" v-model="assemble.combilePonent.goodcode"></el-input>
              <el-button @click="comShow = true" size="small"><i class="el-icon-more"></i></el-button>
            </td>
            <td>
              {{ assemble.combilePonent.unitname }}
            </td>
            <td>
              {{ assemble.combilePonent.goodname }}
            </td>
            <td>
              {{ assemble.combilePonent.categoryName }}
            </td>
            <td>
              {{ assemble.combilePonent.brandName }}
            </td>
            <td>
              <el-select size="small" style="width: 100px;" v-model="assemble.combilePonent.wid">
                <el-option v-for="wid in storeList" :key="wid.shId" :label="wid.storeHomeName" :value="wid.shId">
                </el-option>
              </el-select>
            </td>
            <td><el-input size="small" style="width: 100px;" v-model="assemble.combilePonent.num"></el-input></td>
            <td><el-input size="small" style="width: 100px;" v-model="assemble.combilePonent.comPrice"></el-input></td>
            <td></td>
            <td><el-input size="small" v-model="assemble.combilePonent.detailRemark" style="width: 220px;"></el-input>
            </td>
          </tr>
        </table>
      </div>

      <br>
      <h5>子件：</h5>
      <br>
      <el-table show-summary :summary-method="getSummaries" height="300px" :data="assemble.combilePonent.subList" border
        style="width: 100%;font-size: 13px;">
        <el-table-column width="120px">
          <el-button size="mini" @click="addRow"><i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button size="mini" @click="reduceRow"><i class="el-icon-remove-outline"></i></el-button>
        </el-table-column>
        <el-table-column label="商品编号" width="220">
          <template slot-scope="scope">
            <el-input style="width: 140px;" size="small" v-model="scope.row.goodcode"></el-input>
            <el-button @click="goodsShow = true" size="small"><i class="el-icon-more"></i></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="goodname" label="商品名称" width="120">
        </el-table-column>
        <el-table-column prop="categoryName" label="商品类别" width="120">
        </el-table-column>
        <el-table-column prop="brandName" label="品牌" width="120">
        </el-table-column>
        <el-table-column prop="unitname" label="单位" width="120">
        </el-table-column>
        <el-table-column label="仓库" width="120">
          <template slot-scope="scope">
            <el-select size="small" v-model="scope.row.wid">
              <el-option v-for="wid in storeList" :key="wid.shId" :label="wid.storeHomeName" :value="wid.shId">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="120">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.num"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="出库单位成本" width="150">
          <template slot-scope="scope">
            <el-input size="small" style="width: 100px;" v-model="scope.row.subPrice"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="aid" label="出库成本" width="120">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="360">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.detailRemark"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog top="20px" title="选择商品" :visible.sync="goodsShow">
        <GoodsChoose ref="chooseGoods" :goodsShow="goodsShow" />
        <div slot="footer" class="dialog-footer">
          <el-button @click="goodsShow = false">取 消</el-button>
          <el-button type="primary" @click="yesGoods">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog top="20px" title="选择商品" :visible.sync="comShow">
        <GoodsChoose ref="chooseGoods" :goodsShow="comShow" />
        <div slot="footer" class="dialog-footer">
          <el-button @click="comShow = false">取 消</el-button>
          <el-button type="primary" @click="combileGoods">确 定</el-button>
        </div>
      </el-dialog>
      <el-button style="position: relative;right: -1200px;" @click="goto('ComboBill')">历史单据</el-button>
    </div>
>>>>>>> 6be95d2b3200ab6fbb17d1e0a5a9b367f780cc8e
  </div>
</template>

<script>
<<<<<<< HEAD
import PublicLink from '../public_com/PublicLink.vue';


export default {
  name: 'AddComboBill',
  components: {
    PublicLink
  },
  data() {
    return {//分页参数
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      //新增对话框
      dialogFormVisible: false,
      switchValue: '1',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      input: '',
      comboBill: [
        {
          goodsId: '',
          code: "",
          unit: '',
          pid: '',
          mid: '',
          aid: '',
          num: '',
          outWid: '',
          inputWid: '',
          aboutCode: '',
          remark: '',
          createDate: '',
          status: '',
          state: '',
          isEdit: false
        },
      ],
      tableData: [{
        goodsId: '11111',
        code: "12121212",
        unit: '瓶',
        pid: '11',
        mid: '22',
        aid: '33',
        num: 100,
        outWid: '1121',
        inputWid: '121',
        aboutCode: '232323',
        remark: '',
        createDate: '2024-12-16',
        status: '1',
        state: '1212',
        isEdit: false
      },
      {
        goodsId: '11111',
        code: "12121212",
        unit: '瓶',
        pid: '11',
        mid: '22',
        aid: '33',
        num: 100,
        outWid: '1121',
        inputWid: '121',
        aboutCode: '232323',
        remark: '',
        createDate: '2024-12-16',
        status: '1',
        state: '1212',
        isEdit: false
      },
      {
        goodsId: '11111',
        code: "12121212",
        unit: '瓶',
        pid: '11',
        mid: '22',
        aid: '33',
        num: 100,
        outWid: '1121',
        inputWid: '121',
        aboutCode: '232323',
        remark: '',
        createDate: '2024-12-16',
        status: '1',
        state: '1212',
        isEdit: false
      },
      ],
      value1: '',
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    goto(to) {
      this.$router.push(to)
    },
    handlerClick(row, column, event) {
      this.comboBill.forEach((store, index) => {
        store.isEdit = false
      })
      row.isEdit = true
    },
    handlerClick2(row, column, event) {
      this.tableData.forEach((store, index) => {
        store.isEdit = false
      })
      row.isEdit = true
    },
=======
import GoodsChoose from '../public_com/GoodsChoose.vue';
import PublicLink from '../public_com/PublicLink.vue';

export default {
  name: 'AddComboBill',
  components: {
    PublicLink,
    GoodsChoose
  },
  data() {
    return {
      value: '',
      input: '',
      value1: '',
      goodsShow: false,
      comShow: false,
      assemble: {
        employeeId: '',
        remark: '',
        createDate: '',
        assemCode: '',
        assemCost: '',
        combilePonent: {
          num: '',
          comPrice: '',
          unitname: '',
          cId: '',
          abountcode: '',
          goodcode: '',
          wid: '',
          detailRemark: '',
          subList: [
            {
              goodcode: '',
              subPrice: '',
              wid: '',
              cId: '',
              unitname: '',
              num: '',
              detailRemark: ''
            }
          ]
        }
      },
      storeList: [],
      emList: []
    }
  },
  methods: {
    goto(to) {
      this.$router.push(to)
    },
>>>>>>> 6be95d2b3200ab6fbb17d1e0a5a9b367f780cc8e
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property === "num") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        }
      });

      return sums;
<<<<<<< HEAD
    }

=======
    },
    successMessage(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    errorMessage(msg) {
      this.$message({
        message: msg
        ,
        type: 'error'
      })
    },
    combileGoods() {
      this.comShow = false
      var detail = this.$refs.chooseGoods.selectionList[0]
      this.assemble.combilePonent.goodcode = detail.goodcode
      this.assemble.combilePonent.goodname = detail.goodname
      this.assemble.combilePonent.brandName = detail.brandName
      this.assemble.combilePonent.categoryName = detail.categoryName
    },
    yesGoods() {
      this.goodsShow = false
      // this.goodsList = 
      // console.log(this.goodsList)
      //遍历商品列表
      var detailList = this.$refs.chooseGoods.selectionList
      var indexs = []
      //删除表格中空白的行
      this.assemble.combilePonent.subList.forEach((detail, index) => {
        if (detail.goodcode == '') {
          indexs.push(index)
          console.log(index)
        }
      })
      indexs.reverse().forEach((index, i) => {
        console.log(index)
        this.assemble.combilePonent.subList.splice(index, 1)
      })
      detailList.forEach((item, index) => {
        this.assemble.combilePonent.subList.push(
          {
            goodcode: item.goodcode,
            unitname: item.unitname,
            brandName: item.brandName,
            categoryName: item.categoryName,
            goodname: item.goodname,
            subPrice: '',
            wid: '',
            cId: '',
            num: '',
            detailRemark: ''
          }
        )
      })
    },
    addRow() {
      this.assemble.combilePonent.subList.push({
        goodcode: '',
        goodname: '',
        subPrice: '',
        wid: '',
        cId: '',
        unitname: '',
        num: '',
        detailRemark: ''
      })
    },
    reduceRow() {
      if (this.assemble.combilePonent.subList.length > 1) {
        this.assemble.combilePonent.subList.pop()
      }
    },
    getEmployees() {
      this.axios.get('/info/employee/listAll').then(rs => {
        this.emList = rs.data.list
      })
    },
    getStoreList() {
      this.axios.get('/info/storeHouse/getAllStore',
        {
          params: {
            cId: 1
          }
        }
      ).then(rs => {
        this.storeList = rs.data.storeList
      })
    },
    saveAssemble() {
      const priceRegix = /^[1-9]\d+(\.\d{2})?$/
      const numRegix = /^[1-9]\d*$/
      if (this.assemble.createDate == '') {
        this.errorMessage("请选择单据日期")
        return
      }
      if (this.assemble.assemCost == '') {
        this.errorMessage("请填写组装费用")
        return
      }
      if (!priceRegix.test(this.assemble.assemCost)) {
        this.errorMessage("组装费用不合理")
        return
      }
      if (this.assemble.employeeId == '') {
        this.errorMessage("请选择业务员")
        return
      }
      if (this.assemble.combilePonent.goodcode == '') {
        this.errorMessage("请选择组合件商品编号")
        return
      }
      if (this.assemble.combilePonent.wid == '') {
        this.errorMessage("请选择组合件的仓库")
        return
      }
      if (this.assemble.combilePonent.num == '') {
        this.errorMessage("请填写组合件的数量")
        return
      }
      if (!numRegix.test(this.assemble.combilePonent.num)) {
        this.errorMessage("组合件的数量不合理")
        return
      }
      for (var i = 0; i < this.assemble.combilePonent.subList.length; i++) {
        if (this.assemble.combilePonent.subList[i].goodcode == '') {
          this.errorMessage("请填写第" + (i + 1) + "行子件商品编号");
          return;
        }
        if (this.assemble.combilePonent.subList[i].wid == '') {
          this.errorMessage("请选择第" + (i + 1) + "行子件的仓库");
          return;
        }
        if (!priceRegix.test(this.assemble.combilePonent.subList[i].num)) {
          this.errorMessage("第" + (i + 1) + "行商品数量不合理");
          return;
        }
      }
      this.axios.post('/store/assemble/addAssemble',
        this.assemble
      ).then(rs => {
        if (rs.data.code == 200) {
          this.successMessage("添加成功")
        } else {
          this.errorMessage("添加出错了")
        }
      })
    }
  },
  created() {
    this.getStoreList();
    this.getEmployees()
>>>>>>> 6be95d2b3200ab6fbb17d1e0a5a9b367f780cc8e
  }

}
</script>

<style scoped>
#change {
  width: 100%;
  height: 100%;
}

.change-top {
  width: calc(100% -20px);
  height: 60px;
  /* background-color: pink; */
  line-height: 60px;
  padding-left: 20px;
  font-size: 13px;
}

.change-content {
  width: 100%;
  height: calc(100% - 60px);
  /* background-color: skyblue; */
}

.el-input,
.el-button {
  font-size: 13px;
}

/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
  background-color: #fff1d4;
}

.el-table /deep/ .el-table__body tr:hover>td {
  background-color: #fff1d4;
}
<<<<<<< HEAD
=======

#combile {
  width: 80%;
  border-collapse: collapse;
}

#combile th,
#combile td {
  border: 1px solid #ebeef5;
  color: #9093a6;
  padding: 10px;
}

#combile th {
  font-size: 14px;
  font-weight: 550;
}

.com-div {
  width: 100%;
  overflow-x: auto;
}

.com-div table th,
.com-div table td {
  white-space: nowrap;
  /* width: fit-content; */
}
>>>>>>> 6be95d2b3200ab6fbb17d1e0a5a9b367f780cc8e
</style>